<template>
  <h3 style='font-size: 20px;margin-top: 0;padding: 0;color: #000000;text-align: center'>{{ chartName }}</h3>
  <a-spin :loading="loading" style="width: 100%">
    <a-card
      class="general-card"
    >
      <Chart style="height: 300px;" :option="chartOption" />
    </a-card>
  </a-spin>
</template>

<script lang="ts" setup>
import useLoading from '@/hooks/loading';
import useChartOption from '@/hooks/chart-option';

const props = defineProps({
  chartInfo: {
    type: Array,
    required: false,
    default: ['新访客', '老访客']
  },
  chartData: {
    type: Array,
    required: false,
    default: [
      {
        value: [2],
        name: '新访客',
        itemStyle: {
          color: '#468DFF',
        },
      },
      {
        value: [2],
        name: '老访客',
        itemStyle: {
          color: '#93F576',
        },
      }
    ]
  },
  chartName: {
    type: String,
    required: false,
    default: '访客类型'
  }
});

const { chartOption } = useChartOption((isDark) => {
  const graphicElementStyle = {
    textAlign: 'center',
    fill: isDark ? 'rgba(255,255,255,0.7)' : '#4E5969',
    fontSize: 14,
    lineWidth: 10,
    fontWeight: 'bold',
  };
  return {
    legend: {
      left: 'center',
      data: props.chartInfo,
      bottom: 0,
      icon: 'circle',
      itemWidth: 8,
      textStyle: {
        color: isDark ? 'rgba(255,255,255,0.7)' : '#4E5969',
      },
      itemStyle: {
        borderWidth: 0,
      },
    },
    tooltip: {
      show: true,
      trigger: 'item',
    },
    graphic: {
      elements: [
        {
          type: 'text',
          left: '40%',
          top: 'center',
          style: {
            text: props.chartName,
            ...graphicElementStyle,
          },
        },
      ],
    },
    series: [
      {
        type: 'pie',
        radius: ['50%', '70%'],
        label: {
          color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969',
        },
        itemStyle: {
          borderColor: isDark ? '#000' : '#fff',
          borderWidth: 1,
        },
        data: props.chartData,
      },
    ],
  };
});
const { loading } = useLoading(false);
</script>

<style scoped lang="less">
.ring-graph {
  margin-top: 15px;
  text-align: center;
}
</style>